<template>
    <div>
        <h1>管理员列表</h1>
        <el-table :data="items">
            <el-table-column prop="_id" label="ID" width="220"></el-table-column>
            <el-table-column prop="username" label="用户名" ></el-table-column>
             <el-table-column
                fixed="right"
                label="操作"
                width="180">
                <template slot-scope="scope">
                    <!-- <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button> -->
                    <el-button size="small" type="text"
                    @click="$router.push(`/admin_users/edit/${scope.row._id}`)"
                    >编辑</el-button>

                    <el-button size="small" type="text"
                    @click="remove(scope.row)"
                    >删除</el-button>
                </template>
    </el-table-column>
        </el-table>
    </div>
</template>

<script>
    export default {
        data () {
            return {
                items:[]
            }
        },
        methods: {
            async fetch(){
                 const res = await this.$http.get("rest/admin_users")
                 if(res){
                     this.items = res.data
                 }
            },
            async remove(row){
                 this.$confirm(`是否确定删除用户“${row.username}”?`, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then( async() => {
                    const res =await this.$http.delete(`rest/admin_users/${row._id}`,this.category)
                    if(res){
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        })
                        this.fetch()
                    }else{
                        this.$message.error("网络连接中断")
                    }
                })
            }
        },
        created () {
            this.fetch()   
        }
    }
</script>

<style scoped>

</style>